<template>
	<div id="container"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import axios from 'axios';
import mapdata from './data.js'

import tmpdata from './tmp.js'

export default {
  name: 'AMAP',
	data(){
		return{
			map:null,
			markers:[],
			cluster:[],
			level:11,
			pointData:new Map(),
			pointChildData:new Map()
		}
	},
	methods:{
		initMap(){
			let vm = this;
			
			AMapLoader.load({
				"key": vm.$amapkey,
				"version": "2.0",
				"plugins": [],
				"AMapUI": {
						"version": '1.1',
						"plugins":[],
				},
				"Loca":{
						"version": '2.0'
				},
			}).then((AMap)=>{
				vm.map = new AMap.Map('container', {
						zoom:11,
						zooms:[10,18],
						center: [116.397455,39.909187],
						viewMode:'3D'
				})
				
				// vm.handleMarker(mapdata)
				// vm.handleCluster()
				let arr = []
				tmpdata.forEach(item=>{
					console.log(item.name +"-"+ item.longitude +"-"+ item.latitude)
					arr.push(
						item.name +"-"+ item.longitude +"-"+ item.latitude
					)
					
				})
				console.log(arr)
			});
		},
		handleDisCluster(DistrictCluster){
			let vm = this;
			let disCluster = new DistrictCluster({
				map:vm.map,
				zIndex:11,
				getPosition: function(item) {
						if (!item) {
								return null;
						}
						var parts = item.split(',');
						return [parseFloat(parts[0]), parseFloat(parts[1])];
				}
			})
			disCluster.setData(mapdata)
		},
		handleMarker(points){
			let vm = this;
			points.forEach(item=>{
				if(item){
					let marker = new AMap.Marker({
							name: item.name,   // 点标记名称
							position: new AMap.LngLat(item.lnglat[0],item.lnglat[1]),
							offset: new AMap.Pixel(-15, -15),  
					})
					vm.markers.push(marker)
				}
			})
			console.log(vm.markers)
		},
		handleCluster(){
			let vm = this;
			AMap.plugin('AMap.MarkerClusterer', () => {
				vm.cluster = new AMap.MarkerClusterer(vm.map,mapdata, {
					gridSize: 120
				});
			})
		},
		handleAddEvent(){
			let vm = this;
			let level = 11;
			
			console.log(AMap,AMap.event)
			
			AMap.Event.addListener(vm.map,"zoomchange",function(e){
			        //获取级别
					var zoom=vm.map.getZoom();
					//判断大于11时，显示子项
					if(zoom>=level){
						//去除聚合点
						vm.pointData.forEach(function(item){
							vm.map.remove(item);
						});
						//显示所有子项数据点
						vm.pointChildData.forEach(function(item){
							for(var i in item){
								vm.map.add(item[i]);
							}
						});
					}
					//判断小于11时，显示聚合点
					else{
						//去除所有子项数据点
						vm.pointChildData.forEach(function(item){
							for(var i in item){
								vm.map.remove(item[i]);
							}
						});
						//显示聚合点
						vm.pointData.forEach(function(item){
							vm.map.add(item);
						});
					}
				});
		}
	},
	mounted(){
		this.initMap();
	}

}
</script>

<style>
#container {
	width: 100%;
	height: 100%;
}
</style>

